<template>
	<div class="maintainDetail zy-content">
		<back-level :goPage="back" />
		<Card :title="`${$t('maintenance.plan')}`" class="detail-content-layout">
			<div class="titleItem">
				<div class="checkObject">
					<div class="checkObjectItem">
						<div class="checkObjectName">{{ $t('maintenance.plan') }}</div>
						<div class="checkObjectValue">
							<Tooltip max-width="200">
								<div class="over-wrapper">{{ effPlanDetail.planName }}</div>
								<div slot="content">
									<p>{{ effPlanDetail.planName }}</p>
								</div>
							</Tooltip>
						</div>
					</div>
					<!-- <div class="checkObjectItem">
						<div class="checkObjectName">{{ $t('设备等级') }}</div>
						<div class="checkObjectValue">{{ effPlanDetail.categoryName }}</div>
					</div>
					<div class="checkObjectItem">
						<div class="checkObjectName">{{ $t('设备类别') }}</div>
						<div class="checkObjectValue">{{ effPlanDetail.deviceType }}</div>
					</div> -->
					<div class="checkObjectItem">
						<div class="checkObjectName">{{ $t('maintenance.Frequency') }}</div>
						<div class="checkObjectValue">{{ effPlanDetail.triggerCycleText }}</div>
					</div>
				</div>
			</div>
		</Card>
		<Card :title="`${$t('maintenance.MaintenanceObj')}`" class="detail-content-layout mt16">
			<div class="contentTable">
				<Table
					@on-column-width-resize="
						(a, b, c, d) => {
							onColumnWidthResize(a, b, c, d, 'MaintenanceObjectDetail');
						}
					"
					class="resizable-table"
					border
					ref="selection"
					:columns="columns"
					:data="effPlanDetail.dcmMaintainDetailList"
				></Table>
			</div>
		</Card>
		<Card :title="`${$t('maintenance.Maintenancecontent')}`" class="detail-content-layout mt16">
			<div class="contentTable">
				<Table
					@on-column-width-resize="
						(a, b, c, d) => {
							onColumnWidthResize(a, b, c, d, 'MaintenanceContentDetail');
						}
					"
					class="resizable-table"
					border
					ref="selection"
					:columns="contentColumns"
					:data="effPlanDetail.dcmMaintainProjectList"
				>
					<template slot-scope="{ row }" slot="action">
						<span class="operationBtn" @click="checkToolInfo(row)"> <Icon type="md-eye" size="18" />查看工具和物料</span>
					</template>
				</Table>
			</div>
		</Card>
		<Card :title="`${$t('maintenance.MaintenanceTime')}`" class="detail-content-layout mt16">
			<div class="titleItem">
				<div class="checkObject">
					<div class="checkObjectItem">
						<div class="checkObjectName">{{ $t('maintenance.MaintenanceMethod') }}</div>
						<div class="checkObjectValue">{{ effPlanDetail.maintainName }}</div>
					</div>
					<div class="checkObjectItem">
						<div class="checkObjectName">{{ $t('maintenance.TriggerInterval') }}</div>
						<div class="checkObjectValue">{{ effPlanDetail.triggerCycleText }}</div>
					</div>
					<div class="checkObjectItem">
						<div class="checkObjectName">{{ $t('maintenance.createTime') }}</div>
						<div class="checkObjectValue">{{ effPlanDetail.firstTime }}</div>
					</div>
					<div class="checkObjectItem">
						<div class="checkObjectName">{{ $t('maintenance.planEndTime') }}</div>
						<div class="checkObjectValue">{{ effPlanDetail.planEndTime }}</div>
					</div>
					<div class="checkObjectItem">
						<div class="checkObjectName">{{ $t('maintenance.Confirmed') }}</div>
						<div class="checkObjectValue">{{ iscofirmList[Number(effPlanDetail.isConfirm)] }}</div>
					</div>
					<div class="checkObjectItem">
						<div class="checkObjectName">{{ $t('maintenance.Taskduration') }}</div>
						<div class="checkObjectValue">{{ `${effPlanDetail.pdays}天${effPlanDetail.phours}小时` }}</div>
					</div>
				</div>
			</div>
		</Card>
		<Modal :mask-closable="false" v-model="visible" :title="`${$t('common.Detail')}`" class="checkContentModal" width="1200" footer-hide>
			<contentDetail :formInlineShow="formInlineShow" :materData="materData" :planToolList="toolList"></contentDetail>
		</Modal>
	</div>
</template>

<script>
import contentDetail from './contentDetail.vue';
import toggleTableOperation from '@/mixins/toggleTableOperation';
export default {
	name: 'maintainDetail',
	mixins: [toggleTableOperation],
	components: {
		contentDetail,
	},
	props: ['effPlanDetail'],
	data() {
		return {
			formInlineShow: true,
			deviceTypeList: [],
			iscofirmList: ['否', '是'],
			formInline: {},
			text: '',
			visible: false,
			materData: [],
			toolList: [],
			category: [
				{ name: '全部', key: '' },
				{ name: 'CNC', key: 'CNC' },
				{ name: 'PLC', key: 'PLC' },
				{ name: 'IPC', key: 'IPC' },
			],
			position: [{ name: '全部', key: '' }],
			classification: [{ name: '全部', key: '' }],
			checkObject: [
				{ name: '计划名称', value: 'cnc设备定期保养' },
				{ name: '设备类别', value: 'cnc' },
				{ name: '保养位置', value: '主轴' },
				{ name: '保养分类', value: '润滑' },
			],
			checkTime: [
				{ name: '保养方式', value: '定期保养' },
				{ name: '触发间隔', value: '次/日' },
				{ name: '首次生成时间', value: '2021年9月15日 16:38:50' },
				{ name: '计划截止时间', value: '2021年9月15日 16:38:50' },
				{ name: '任务存活时间', value: '1天3小时' },
			],
			checkContent: [
				{ name: '保养项目', value: '主轴清洗' },
				{ name: '保养方法', value: '主轴清洗' },
			],
			checkStandard: [
				{ name: '下限', value: '0.5' },
				{ name: '上限', value: '1.0' },
				{ name: '单位', value: '摄氏度' },
			],
			checkTool: [
				{ name: '物料代码', value: '' },
				{ name: '使用工具', value: '' },
				{ name: '规格型号', value: '' },
				{ name: '品牌', value: '' },
				{ name: '数量', value: '' },
				{ name: '保养方式', value: '' },
			],
			checkMaterial: [
				{ name: '物料代码', value: '' },
				{ name: '物料名称', value: '' },
				{ name: '数量', value: '' },
				{ name: '单价', value: '' },
				{ name: '总价', value: '' },
			],
			columns: [
				// {
				//   type: 'index',
				//   width: 60,
				//   title: `${ this.$t('common.index') }`,
				//   align: 'center'
				// },
				{ title: `${this.$t('common.company')}`, key: 'brand', align: 'center', width: 300, resizable: true },
				{
					title: `${this.$t('common.Installation')}`,
					key: 'factory',
					align: 'center',
					minWidth: 200,
					tooltip: true,
					width: 300,
					resizable: true,
				},
				{
					title: `${this.$t('maintenance.EquipmentName')}`,
					key: 'deviceName',
					align: 'center',
					minWidth: 100,
					tooltip: true,
					width: 300,
					resizable: true,
				},
				{
					title: `${this.$t('maintenance.EquipmentNo')}`,
					key: 'deviceNo',
					align: 'center',
					minWidth: 100,
					tooltip: true,
					width: 300,
					resizable: true,
				},
				{
					title: '设备等级',
					key: 'deviceGrade',
					align: 'center',
					minWidth: 100,
					tooltip: true,
					width: 100,
					resizable: true,
				},
				{
          title: '设备类别',
					key: 'deviceCategory',
					align: 'center',
					minWidth: 100,
					tooltip: true,
					width: 300,
					resizable: true,
				},
				{
					title: `${this.$t('equipCheck.Model')}`,
					key: 'deviceSpec',
					align: 'center',
					minWidth: 200,
					tooltip: true,
					// width:300,
					// resizable: true
				},
			],
			levelList: [
				{ name: '一级保养', key: 1 },
				{ name: '二级保养', key: 2 },
				{ name: '三级保养', key: 3 },
			],
			contentColumns: [
			
				{
					title: `${this.$t('maintenance.Level')}`,
					key: 'itemLevel',
					align: 'center',
					width: 180,
					tooltip: true,
					render: (h, params) => {
						return h('div', [h('span', {}, this.levelList.find((val) => val.key === params.row.itemLevel).name)]);
					},
					resizable: true,
				},
				{
					title: `${this.$t('显示顺序')}`,
					key: 'sequence',
					align: 'center',
					width: 100,
					tooltip: true,
					resizable: true,
				},
				{
					title: `${this.$t('maintenance.MaintenanceItem')}`,
					key: 'itemProject',
					align: 'center',
					width: 180,
					tooltip: true,
					resizable: true,
				},
				{
					title: `${this.$t('maintenance.MaintenanceMethod')}`,
					key: 'itemMethod',
					align: 'center',
					width: 180,
					tooltip: true,
					resizable: true,
				},
				{
					title: `${this.$t('maintenance.workinghours')}`,
					key: 'itemHours',
					align: 'center',
					width: 180,
					tooltip: true,
					resizable: true,
				},
				// {
				//     title: `${this.$t('maintenance.UpperLimit')}`,
				//     key: 'maxValue',
				//     align: 'center',
				//     minWidth: 100,
				//     tooltip: true
				// },
				{
					title: `${this.$t('maintenance.numberRequirements')}`,
					key: 'minValue',
					align: 'center',
					width: 180,
					tooltip: true,
					resizable: true,
				},
				{
					title: `${this.$t('maintenance.Maintenancestandards')}`,
					key: 'unitName',
					align: 'center',
					width: 180,
					tooltip: true,
					resizable: true,
				},
				{ title: `${this.$t('保养位置')}`, key: 'bomOrg', align: 'center', minWidth: 200, tooltip: true, resizable: true },
				{
					title: `${this.$t('common.operation')}`,
					slot: 'action',
					minWidth: 200,
					align: 'center',
					// fixed:"right"
				},
			],
			contentData: [
				{ content: '刀库刀套清理', checkFunction: '动作顺畅、定位准确', company: '--', up: '--', down: '--' },
				{ content: '打黄油', checkFunction: '无松动', company: '--', up: '--', down: '--' },
				{ content: '主轴风扇清理', checkFunction: '动作顺畅、定位准确', company: '--', up: '--', down: '--' },
			],
			total: 64,
			pageSize: 10,
			pageNum: 1,
			pageSizeOption: [10, 20, 30, 40],
		};
	},
	created() {
		this.getColumnWidth(this.contentColumns, 'MaintenanceContentDetail');
		this.getColumnWidth(this.columns, 'MaintenanceObjectDetail');
		// this.getFaultCategory("设备类型")
	},
	methods: {
		checkToolInfo(row) {
			this.visible = true;
			this.getWlDetail(row.itemId || row.id);
		},
		getWlDetail(itemId) {
			this.axios({
				method: 'get',
				url: '/dms/dcmMaintainItem/queryById',
				params: {
					id: itemId,
				},
			}).then((res) => {
				if (res.code === 200) {
					this.formInline = {
						...res.data,
						triggerCycle: res.data.triggerCycle ? res.data.triggerCycle.split(',') : [],
						minValue: res.data.minValue ? Number(res.data.minValue) : '',
						maxValue: res.data.maxValue ? Number(res.data.maxValue) : '',
					};
					if (this.formInline.itemLevel) {
						this.formInline.itemLevel = this.levelList.find((val) => val.key === this.formInline.itemLevel).name;
					}
					// if (this.formInline.categoryName){
					//   this.categorySelectChange(this.formInline.categoryName)
					// }
					this.toolList = res.data.dcmMaintainToolList.map((item) => {
						return {
							...item,
							isEdit: false,
						};
					});
					this.materData = res.data.dcmMaintainMaterialList.map((item) => {
						return {
							...item,
							isEdit: false,
						};
					});

					// this.materialList = res.data.materialList
					// this.toolList = res.data.toolList
				} else {
					this.$Message.warning({ content: res.msg, duration: 6, closable: true });
				}
			});
		},
		deviceNameChange(val) {
			if (val) {
				this.searchParams.deviceType = val;
			}
		},
		//获取故障数据
		getFaultCategory(name) {
			this.axios({
				method: 'get',
				url: '/dms/faultCategory/basicDict',
				params: { name },
			}).then((res) => {
				if (res.code === 200) {
					if (name === '故障分类') {
						this.faultCategoryList = res.data.map((item) => {
							if (item.value) return item;
						});
					} else if (name === '设备类型') {
						this.deviceTypeList = res.data.map((item) => {
							if (item.value) return item;
						});
					}
				} else {
					this.$Message.warning({ content: res.msg, duration: 6, closable: true });
				}
			});
		},
		back() {
			this.$emit('changeDetailVisible', false, this.effPlanDetail.id);
		},
		changePageNum() {},
		changePageSize() {},
	},
};
</script>
<style lang="scss">
.maintainDetail {
	background: #fff;

	.title {
		display: flex;
		justify-content: flex-start;
		font-size: 20px;
		padding: 10px;
		border-bottom: 1px solid #dddddd;
		align-items: center;

		.back {
			color: #187bdb;
			font-size: 16px;
			padding-left: 20px;
			cursor: pointer;
			float: right;
		}
	}

	.titleItem {
		position: relative;
		font-size: 18px;
		//font-weight: bold;
		padding: 0;

		.checkObject {
			display: flex;
			flex-wrap: wrap;
			padding: 0;
			font-family: 'Arial Normal', 'Arial', sans-serif;
			font-weight: 400;
			font-style: normal;
			letter-spacing: normal;
			/*border-bottom: 2px solid #D7D7D7;*/
			.checkObjectItem {
				display: flex;
				flex: 33.33%;
				flex-wrap: wrap;

				.checkObjectName {
					height: 40px;
					line-height: 40px;
					width: 100%;
					border: 1px solid #eeeeee;
					background: #f5f6f7;
					text-align: left;
					padding: 0 10px;
					color: #999999;
					font-size: 13px;
				}

				.checkObjectValue {
					height: 40px;
					line-height: 40px;
					width: 100%;
					border: 1px solid #eeeeee;
					padding-left: 10px;
					color: #333333;
					font-size: 13px;
				}
			}
		}

		.searchBox {
			.label {
				display: flex;
			}
		}
	}

	.contentTable {
		margin: 0;
		.operationBtn {
			//display: flex;
			//justify-content: center;
			//align-items: center;
			padding: 0 5px;
			//color: #035beb;
		}
	}

	.titleItem::before {
		display: none;
		//content: '';
		//position: absolute;
		//width: 3px;
		//height: 20px;
		//top: 12px;
		//left: 0px;
		//background: #187BDB;
	}
}

.over-wrapper {
	width: 300px;
	/*height: 23px;*/
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}
</style>
